<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="ThemeBucket">
  <link rel="shortcut icon" href="#" type="image/png">

  <title>用户列表</title>
    <link rel="stylesheet" th:href="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css}">
    <script th:src="@{https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js}"></script>



    <div th:include="common :: commonheader"></div>
</head>

<body class="sticky-header">


<section>
    <!-- 左边开始-->
    <div th:replace="common :: leftmenu"></div>
    <!-- 左边结束-->

    <!--主要内容开始-->
    <div class="main-content" >
        <!-- 头部分开始-->
        <div th:replace="common :: headermenu"></div>
        <!-- 头部分结束-->
        <!-- 页面标题开始-->
        <div class="page-heading">
            <h3>
                图书信息
            </h3>
            <ul class="breadcrumb">
                <li>
                    <a href="#">精选图书</a>
                </li>
                <li>
                    <a href="#">推荐图书</a>
                </li>
                <li class="active"><a href="#">特价图书</a></li>
            </ul>
        </div>
        <!-- 页面标题结束 -->

        <!--身体包装员开始-->
        <div class="wrapper">
             <div class="row">
                <div class="col-sm-12">
                <section class="panel">
                <header class="panel-heading">
                    用户信息
                    <span class="tools pull-right">
                        <a href="javascript:;" class="fa fa-chevron-down"></a>
                         <!--    删除键    -->
<!--                        <a href="javascript:;" class="fa fa-times"></a>-->
                     </span>
                </header>
                <div class="panel-body">
                <div class="adv-table editable-table ">


                <div class="space15"></div>



                    <!--加载数据-->
                    <div id="user"></div>

                </div>
                </div>
                </section>
                </div>
                </div>
        </div>

        <!-- 登录模态框（Modal） -->
        <div class="modal fade" id="upuser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                        </button>
                        <h4 class="modal-title" id="loginModalLabel">
                            修改密码
                        </h4>
                    </div>
                    <div class="modal-body"   >
                        <!--登录的form表单-->
                        <form id="loginForm" class="form-horizontal" role="form" action="" autocomplete="off">
                            <input type="hidden" id="id" name="id" value="">

                            <div class="form-group has-feedback" >
                                <label class="col-sm-2 control-label">密码</label>
                                <div  class="col-sm-5">
                                    <input  type="password" autocomplete="off" class="form-control" name="password1" id="password1" placeholder="输入密码">
                                </div>

                            </div>
                            <div class="form-group has-feedback">
                                <label class="col-sm-2 control-label">确认密码</label>
                                <div class="col-sm-5" >
                                    <input th:onblur="|userword()|" autocomplete="off"  type="password" class="form-control" name="password" id="password"  placeholder="再次输入密码">


                                </div>
                                <div class="col-sm-3" id="pwTip" style="padding-top: 10px;display: none">
                                    <label class="alert-danger">密码一致</label>
                                </div>

                                <div class="col-sm-3" id="pwdTip" style="padding-top: 10px;display: none">
                                    <label class="alert-danger" id="tip">密码不一致</label>
                                </div>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <input type="button" class="btn btn-primary" value="修改" th:onclick="|login()|">
                            </div>
                        </form>
                        <!--form结束-->
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
        </div>
        <!--身体包装端结束-->

        <!--footer section start-->
        <footer>
            2021 &copy; 后台管理
        </footer>
        <!--footer section end-->


    </div>
    <!-- main content end-->
</section>
<div th:replace="common :: adminname1"></div>
<!-- 最后把js文件的页面加载速度 -->
<div th:replace="common :: commonscript"></div>

<!--data table-->
<script type="text/javascript" src="js/data-tables/jquery.dataTables.js"></script>
<script type="text/javascript" src="js/data-tables/DT_bootstrap.js"></script>




<!--script for editable table-->
<script src="js/editable-table.js"></script>

<!-- END JAVASCRIPTS -->
<script>
    jQuery(document).ready(function() {
        EditableTable.init();
    });
</script>
<script th:inline="javascript">
    //获取应用路径
    var contextPath = [[${#request.getContextPath()}]];



</script>
<script type="text/javascript">
    //绑定模态框的id
    $("#upuser").modal("hide");
    function Values(id){
        //给id标签的input赋值
        $("#id").val(id);
        $("#password").val("");
        $("#password1").val("");
    }

    $(function () {
        $("#user").load(contextPath + "/getuserData",buildQuery(1,5));
    })
    function username(page,size) {

        var usernameid =  document.getElementById("usernameid").value;

        $("#user").load(contextPath + "/UserNameData?usernameid="+usernameid,buildQuer(page,size));
    }

    function userword() {

        var password1 =  document.getElementById("password1").value;
        var password =  document.getElementById("password").value;
        if (password==password1){
            $("#pwTip").css("display","block");
            $("#pwdTip").css("display","none");
        }else {
            $("#pwdTip").css("display","block");
            $("#pwTip").css("display","none");
        }

    }
    function login(){
        var id =  document.getElementById("id").value;
        var password1 =  document.getElementById("password1").value;
        var password =  document.getElementById("password").value;

        if (password==password1){

            //执行修改
            window.location.href = "upuser?id=" + id+"&password="+password;
        }else {
            alert("密码不一致");
        }
    }



    //加载其他页数据
    function loadData(page,size) {

        $("#user").load(contextPath + "/getuserData",buildQuery(page,size));

    }


    function Delete(id) {
        var choose = window.confirm("确定删除吗？");
        if (choose) {
            //执行删除
            window.location.href = "deleteuser?id=" + id;

        }

    }


    //包装查询参数
    function buildQuery(page,size) {
        var query = {};
        query.page = typeof page == "undefined" ? 1 : page;
        query.size = size == '' ? 5 :size;

        return query;
    }
    function buildQuer(page,size) {
        var query = {};
        query.page =  page == '' ? 1 : page;
        query.size = size == '' ? 5 :size;
        return query;
    }




</script>

</body>
</html>
